<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#shopData :text").blur(function () {
                changeNum($(this));
            });

            $("#shopData :button").click(function () {
               removeProduct($(this));
            });
            computPrice();

            $("#headBox").click(function () {
                $("#shopData [name=item]").attr("checked",this.checked);
            });
        });
        //移除商品
        function removeProduct(buttonObj) {
            buttonObj.parents("tr").remove();
            computPrice();
        }

        //改变文本框数量
        function changeNum(textObj) {
            var num = parseInt(textObj.val());
            if(isNaN(num)){
                num = 1;
            }
            textObj.val(num);

            //得到单价   parent()为直接父元素，  prev（）为上一个兄弟节点
            var price = textObj.parent().prev().html();
            //next()为下一个兄弟节点
            textObj.parent().next().html(num*price);
            computPrice();
        }

        //计算总价
        function computPrice() {
            let totalPrice = 0;
            let trArray = $("#shopData tr");
            for(let i=0;i<trArray.length;i++){
                let tdArray = $(trArray[i]).find("td");
                totalPrice += parseInt(tdArray[3].innerHTML);
            }
            $("#totalSpan").html(totalPrice);
        }
    </script>
</head>
<body>
    <table border="1" cellspacing="0" width="60%">
        <thead>
            <tr><th><input type="checkbox" id="headBox"></th><th>商品名</th><th>单价</th><th>数量</th><th>单项总价</th><th>操作</th></tr>
        </thead>

        <tbody id="shopData">
            <tr><td><input type="checkbox" name="item"></td><td>汉堡</td><td>5</td><td><input type="text" value="1"></td>
                <td>5</td><td><input type="button" value="移除商品"></td></tr>
            <tr><td><input type="checkbox" name="item"></td><td>可乐</td><td>3</td><td><input type="text" value="1"></td>
                <td>3</td><td><input type="button" value="移除商品"></td></tr>
            <tr><td><input type="checkbox" name="item"></td><td>爆米花</td><td>8</td><td><input type="text" value="1"></td>
                <td>8</td><td><input type="button" value="移除商品"></td></tr>
            <tr><td><input type="checkbox" name="item"></td><td>豆花</td><td>4</td><td><input type="text" value="1"></td>
                <td>4</td><td><input type="button" value="移除商品"></td></tr>
        </tbody>
    </table>
    购物车总价：￥<span id="totalSpan"></span>
</body>
</html>